<template>
  <div class="ProvenTechniqueFSMSPedit" v-loading="loading">
    <div class="ProvenTechniqueFSMSPedit-top">
      <div class="ProvenTechniqueFSMSPedit-top-one">成品加工单：</div>
      <div class="ProvenTechniqueFSMSPedit-top-two">
        <!-- <div class="ProvenTechniqueFSMSPedit-top-two-display">
          <div class="star" style="color: #2c70d6">工厂合同号：</div>
          <div>
            <el-input
              v-model="data.factory_contract_no"
              placeholder="请输入工厂合同号"
              size="mini"
              clearable
            ></el-input>
          </div>
        </div> -->
        <div class="ProvenTechniqueFSMSPedit-top-two-display">
          <div class="star" style="color: #2c70d6">供应商：</div>
          <div>
            <el-select
              v-model="data.supplier_id"
              size="mini"
              placeholder="请选择"
              clearable
              filterable
            >
              <el-option
                v-for="item in factoryList"
                :key="item.id"
                :label="item.factory_name"
                :value="item.supplier_id"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="ProvenTechniqueFSMSPedit-top-two-display">
          <div class="star" style="color: #2c70d6">合同交期：</div>
          <div>
            <el-date-picker
              size="mini"
              v-model="data.contract_date"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="ProvenTechniqueFSMSPedit-top-two-display">
          <div class="star" style="color: #2c70d6">理单人：</div>
          <div>
            <el-select
              v-model="data.order_processor"
              filterable
              placeholder="请选择"
              size="mini"
            >
              <el-option
                v-for="item in userlist"
                :key="item.id"
                :label="item.username"
                :value="item.username"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- <div class="ProvenTechniqueFSMSPedit-top-two-display">
          <div>跟单人：</div>
          <div>
            <el-select
              v-model="data.order_processor"
              filterable
              placeholder="请选择"
              size="mini"
            >
              <el-option
                v-for="item in userlist"
                :key="item.id"
                :label="item.username"
                :value="item.username"
              >
              </el-option>
            </el-select>
          </div>
        </div> -->
      </div>
      <!-- <div class="ProvenTechniqueFSMSPedit-top-two">
        <div class="ProvenTechniqueFSMSPedit-top-two-display">
          <div>件数：</div>
          <div>0</div>
        </div>
        <div class="ProvenTechniqueFSMSPedit-top-two-display">
          <div>总价：</div>
          <div>0</div>
        </div>
      </div> -->
    </div>
    <div class="ProvenTechniqueFSMSPedit-bottom">
      <div class="ProvenTechniqueFSMSPedit-bottom-title">
        <div>数量</div>
      </div>
      <div class="ProvenTechniqueFSMSPedit-bottom-content">
        <div class="ProvenTechniqueFSMSPedit-bottom-content-add">
          <el-button size="mini" @click="onAddSku">添加</el-button>
        </div>
        <div class="ProvenTechniqueFSMSPedit-bottom-content-table">
          <el-table :data="data.arrlist" style="width: 100%" border size="mini">
            <el-table-column label="款式编码(货号)" align="center">
              <template>
                {{ data.type_no }}
              </template>
            </el-table-column>
            <el-table-column prop="sku_code" label="SKU" align="center">
            </el-table-column>
            <el-table-column label="商品名称" align="center">
              <template>
                {{ data.type_name }}
              </template>
            </el-table-column>
            <el-table-column prop="num" label="数量" align="center">
            </el-table-column>
            <el-table-column prop="unit_price" label="单价" align="center">
            </el-table-column>
            <el-table-column prop="total_price" label="总价" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="{ row, $index }">
                <el-button type="text" size="mini" @click="onEdit(row, $index)"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="mini"
                  @click="onDelete($index)"
                  style="color: red"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="save">
      <el-button
        circle
        type="primary"
        size="default"
        :loading="loading"
        @click="onSave"
        >保 存</el-button
      >
    </div>
    <el-dialog title="添加SKU信息" :visible.sync="dialogVisible" width="400">
      <div>
        <div class="dialogVisibleclass">
          <div class="dialogVisibleclass-div">
            <div class="star">款式编码：</div>
            <div>
              <el-input
                :readonly="data.arrlist.length > 0 ? true : false"
                v-model="data.type_no"
                placeholder="请输入完整的款式编码"
                size="mini"
                @keyup.enter.native="clickType_no"
                ><el-button
                  v-if="!data.arrlist.length"
                  slot="append"
                  icon="el-icon-search"
                  @click="clickType_no"
                ></el-button
              ></el-input>
            </div>
          </div>
          <div class="dialogVisibleclass-div">
            <div class="star">商品名称：</div>
            <div>{{ data.type_name }}</div>
          </div>
        </div>
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          size="mini"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column prop="sku_code" label="SKU" align="center">
          </el-table-column>
          <el-table-column prop="unit_price" label="单价" align="center">
            <template slot-scope="{ row, $index }">
              <el-input
                type="number"
                v-model="row.unit_price"
                placeholder="请输入单价"
                size="mini"
                @input="onInput($event, row, $index)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="num" label="数量" align="center">
            <template slot-scope="{ row, $index }">
              <el-input
                type="number"
                v-model="row.num"
                placeholder="请输入数量"
                size="mini"
                @input="onInputnum($event, row, $index)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="total_price" label="总价" align="center">
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          :disabled="!multipleSelection.length"
          @click="clickSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="编辑SKU信息" :visible.sync="dialogVisibleRow" width="400">
      <div>
        <div class="dialogVisibleclass">
          <div class="dialogVisibleclass-div">
            <div class="star">款式编码：</div>
            <div>
              <div>{{ data.type_no }}</div>
            </div>
          </div>
          <div class="dialogVisibleclass-div">
            <div class="star">商品名称：</div>
            <div>{{ data.type_name }}</div>
          </div>
        </div>
        <el-table :data="row" style="width: 100%" border size="mini">
          <el-table-column prop="sku_code" label="SKU" align="center">
          </el-table-column>
          <el-table-column prop="unit_price" label="单价" align="center">
            <template slot-scope="{ row, $index }">
              <el-input
                type="number"
                v-model="row.unit_price"
                placeholder="请输入单价"
                size="mini"
                @input="onInputRow($event, row, $index)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="num" label="数量" align="center">
            <template slot-scope="{ row, $index }">
              <el-input
                type="number"
                v-model="row.num"
                placeholder="请输入数量"
                size="mini"
                @input="onInputnumRow($event, row, $index)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="total_price" label="总价" align="center">
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleRow = false">取 消</el-button>
        <el-button type="primary" @click="clickSubmitRow">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  postHomeCodeGetFactory,
  postAdminUserUserlist,
  postAdminProductionGetOrtherTypenoSku,
  postAdminProductionaddprocessing,
} from "@/api";
import { floatMultiply } from "@/utils/algorithm.js";
export default {
  data() {
    return {
      loading: false,
      dialogVisible: false,
      dialogVisibleRow: false,
      factoryList: [],
      userlist: [],
      data: {
        supplier_id: "", // 工厂id
        // factory_contract_no: "", //合同号
        contract_date: "", //合同交期
        order_processor: "", //理单员
        type_no: "", //款号
        type_name: "", //款名
        arrlist: [], //sku列表
      },
      row: [],
      index: "",
      tableData: [],
      multipleSelection: [],
    };
  },
  async activated() {
    this.loading = true;
    
    if (this.$route.params.type) {
      this.data = {
        supplier_id: "", // 工厂id
        // factory_contract_no: "", //合同号
        contract_date: "", //合同交期
        order_processor: "", //理单员
        type_no: "", //款号
        type_name: "", //款名
        arrlist: [], //sku列表
      };
      this.dialogVisible= false
      this.dialogVisibleRow= false
      this.factoryList= []
      this.userlist= []
      this.row= []
      this.index= ""
      this.tableData= []
      this.multipleSelection= []
    }
    await this.postHomeCodeGetFactory();
    await this.postAdminUserUserlist();
    this.loading = false;
  },
  methods: {
    // 编辑
    onEdit(e, index) {
      e = JSON.parse(JSON.stringify(e));
      this.row = [e];
      this.index = index;
      this.dialogVisibleRow = true;
    },
    // 删除
    onDelete(index) {
      let { arrlist } = this.data;

      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          arrlist.splice(index, 1);
        })
        .catch(() => {});
    },
    // 添加
    onAddSku() {
      this.dialogVisible = true;
      let { type_no } = this.data;
      if (type_no) {
        this.clickType_no();
      }
    },
    // 保存
    async onSave() {
      let { data } = this;
      if (
        data.supplier_id &&
        // data.factory_contract_no &&
        data.contract_date &&
        data.order_processor &&
        data.type_no &&
        data.arrlist.length
      ) {
        this.loading = true;
        try {
          let res = await postAdminProductionaddprocessing(data);
          this.dialogVisible = false;
          this.dialogVisibleRow = false;
          this.factoryList = [];
          this.userlist = [];
          this.data = {
            supplier_id: "", // 工厂id
            // factory_contract_no: "", //合同号
            contract_date: "", //合同交期
            order_processor: "", //理单员
            type_no: "", //款号
            type_name: "", //款名
            arrlist: [], //sku列表
          };
          this.row = [];
          this.index = "";
          this.tableData = [];
          this.multipleSelection = [];
          this.$message.success("创建成功");
          setTimeout(() => {
            this.loading = false;
            this.$router.go(-1);
          }, 1000);
        } catch (error) {
          this.loading = false;
        }
      } else {
        this.$message.warning("请填写完整内容");
      }
    },
    onInput(e, row, index) {
      e = e.replace(/[^0-9.]/g, "");
      e = Number(e);
      let { tableData, multipleSelection } = this;
      let tmpObj = tableData[index];
      tmpObj.unit_price = e;
      tmpObj.total_price = floatMultiply(e, tmpObj.num);
      this.$set(this.tableData, index, tmpObj);
      for (let idx = 0; idx < multipleSelection.length; idx++) {
        if (multipleSelection[idx].sku_code == row.sku_code) {
          multipleSelection[idx] = row;
        }
      }
      this.multipleSelection = multipleSelection;
    },
    onInputnum(e, row, index) {
      e = e.replace(/[^0-9.]/g, "");
      e = Number(e);
      let { tableData, multipleSelection } = this;
      let tmpObj = tableData[index];
      tmpObj.num = e;
      tmpObj.total_price = floatMultiply(e, tmpObj.unit_price);
      this.$set(this.tableData, index, tmpObj);
      for (let idx = 0; idx < multipleSelection.length; idx++) {
        if (multipleSelection[idx].sku_code == row.sku_code) {
          multipleSelection[idx] = row;
        }
      }
      this.multipleSelection = multipleSelection;
    },
    onInputRow(e, rows, index) {
      e = e.replace(/[^0-9.]/g, "");
      e = Number(e);
      let { row } = this;
      let tmpObj = row[index];
      tmpObj.unit_price = e;
      tmpObj.total_price = floatMultiply(e, tmpObj.num);
      this.$set(this.row, index, tmpObj);
    },
    onInputnumRow(e, rows, index) {
      e = e.replace(/[^0-9.]/g, "");
      e = Number(e);
      let { row } = this;
      let tmpObj = row[index];
      tmpObj.num = e;
      tmpObj.total_price = floatMultiply(e, tmpObj.unit_price);
      this.$set(this.row, index, tmpObj);
    },
    clickSubmitRow() {
      let { row, index } = this;
      if (!row[0].num || !row[0].unit_price) {
        this.$message.warning("内容不能为空或0");
        return;
      }
      this.$set(this.data.arrlist, index, row[0]);
      this.dialogVisibleRow = false;
    },
    clickSubmit() {
      let arrlist = JSON.parse(JSON.stringify(this.data.arrlist));
      let multipleSelection = this.multipleSelection;
      let istrue = multipleSelection.some((e) => {
        return !e.num || !e.unit_price;
      });
      if (istrue) {
        this.$message.warning("勾选内容不能为空或0");
        return;
      }
      let arrlists = arrlist.concat(multipleSelection);
      this.data.arrlist = arrlists;
      this.multipleSelection = [];
      this.tableData = [];
      this.dialogVisible = false;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    async clickType_no() {
      let { type_no } = this.data;
      if (type_no) {
        let obj = {
          type_no,
        };
        let res = await postAdminProductionGetOrtherTypenoSku(obj);
        if (res.data.sku_code) {
          let sku_code = res.data.sku_code;
          this.data.type_name = res.data.type_name;
          let arrlists = [];
          let { arrlist } = this.data;
          sku_code.forEach((element) => {
            let istrue = arrlist.some((e) => {
              return e.sku_code == element;
            });
            console.log("istrue", istrue);
            if (!istrue) {
              let obj = {
                sku_code: element,
                num: "",
                unit_price: "",
                total_price: "",
              };
              arrlists.push(obj);
            }
          });
          this.tableData = arrlists;
        } else {
          this.$message.warning("请输入正确的款式编码");
        }
      }
    },
    // 用户列表
    async postAdminUserUserlist() {
      let obj = {
        size: 100000,
        page: 1,
      };
      postAdminUserUserlist(obj).then((res) => {
        this.userlist = res.data;
      });
    },
    // 加工厂列表
    async postHomeCodeGetFactory() {
      let obj = {
        page: 1,
        size: 1000,
      };
      await postHomeCodeGetFactory(obj).then((res) => {
        this.factoryList = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.save {
  position: absolute;
  top: 110px;
  right: 100px;
  z-index: 10;
  > .el-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }
}
.dialogVisibleclass {
  display: flex;
  margin-bottom: 20px;
  .dialogVisibleclass-div {
    display: flex;
    align-items: center;
    margin-right: 40px;
  }
}
.ProvenTechniqueFSMSPedit {
  font-size: 14px;

  padding-bottom: 20px;
  .ProvenTechniqueFSMSPedit-top {
    padding: 10px;
    background: #fff;
    .ProvenTechniqueFSMSPedit-top-one {
      border-bottom: 1px solid #efefef;
      padding-bottom: 5px;
      font-weight: 600;
    }
    .ProvenTechniqueFSMSPedit-top-two {
      display: flex;
      flex-wrap: wrap;
      padding: 20px 20px 0;
      .ProvenTechniqueFSMSPedit-top-two-display {
        display: flex;
        align-items: center;
        margin-right: 60px;
      }
    }
  }
  .ProvenTechniqueFSMSPedit-bottom {
    margin-top: 10px;
    background: #fff;
    .ProvenTechniqueFSMSPedit-bottom-title {
      border-bottom: 1px solid #efefef;
      > div {
        color: #fff;
        background: #2c70d6;
        width: 80px;
        height: 30px;
        text-align: center;
        line-height: 30px;
      }
    }
    .ProvenTechniqueFSMSPedit-bottom-content {
      .ProvenTechniqueFSMSPedit-bottom-content-add {
        padding: 10px;
      }
      .ProvenTechniqueFSMSPedit-bottom-content-table {
        padding: 10px;
      }
    }
  }
}
</style>